<template>
	<view class="body_box">
		<view v-show="!show">
			<u-navbar title="三秒估价" @leftClick="show = true" :safeAreaInsetTop="false">
			</u-navbar>
			<!-- <view style="width: 100rpx;">
				<u-button size="mini" text="返回" type="success" plain shape="circle" @click="show = true"></u-button>
			</view> -->
			<view class="model-box">
				<view class="header-box">
					<view class="h2-font">{{selInfo.name}}</view>
					<view v-if="testNumber === 0">成色：9成新</view>
					<view v-else-if="testNumber < 2">成色：8成新</view>
					<view v-else-if="testNumber < 5">成色：7成新</view>
					<view v-else>成色：环保机</view>
					<view>回收价格区间: {{selInfo.minPrice}} ~ {{selInfo.maxPrice}}</view>
				</view>
				
				<view class="test-box">
					<view class="sel-box">
						<view class="h2-font">验机选项</view>
						<u-collapse :border="false" :value="collapseVal" ref="coll_dom">
						    <u-collapse-item
						      :title="item.name"
							  :value="item.selIndex != null ? item.children[item.selIndex].name : ''"
						      :name="item.id"
							  v-for="(item,key) in testArr"
						    >
						      <view>
								  <view 
									:class="item.selIndex === index ? 'sel-item-box':'item-box'" 
									v-for="(c, index) in item.children"
									@click="itemChange(key, index)"
								>{{c.name}}</view>
							  </view>
						    </u-collapse-item>
						  </u-collapse>
					</view>
				</view>
			</view>
		</view>
		<view v-show="show">
			<m-selection @change="selectionchange"></m-selection>
		</view>
	</view>
</template>

<script>
	import mSelection from "@/pages/store/model/selection.vue"
	export default {
		components: {mSelection},
		data() {
			return {
				//打开的折叠
				collapseVal: [],
				show: true,
				selInfo: null,
				//验机选项
				testArr: [],
				testNumber: 0,
			}
		},
		
		methods: {
			getTestArr() {
				const params = {
					modelType: this.selInfo.modelType,
					systemType: this.selInfo.systemType
				}
				let specsSet = new Set();
				this.selInfo.specsJson = JSON.parse(this.selInfo.specsJson);
				this.selInfo.specsJson.forEach(it => {
					specsSet.add(it[0])
					specsSet.add(it[1])
				})
				this.$request("/appCommon/model/options", 'get', params).then(res => {
					this.testArr = [];
					let specsArr = []; //规格列表
					let testArr = []; //验机列表
					let specsChid = [];
					let testChid = [];
					res.data.forEach(it => {
						if(it.type === 1) {
							if(specsSet.has(it.id)) {
								//规格
								if(it.parentId === 0)
									specsArr.push(it);
								else
									specsChid.push(it);
							}
						}else if(it.type === 2) {
							//验机
							if(it.parentId === 0)
								testArr.push(it);
							else
								testChid.push(it);
						}
					})
					this.setChildren(specsArr, specsChid);
					this.setChildren(testArr, testChid);
					this.testArr.push(...specsArr);
					this.testArr.push(...testArr);
					this.collapseVal = [];
					this.testArr.forEach(it => {
						this.collapseVal.push(it.id);
					})
					this.$nextTick(() => {
						this.$refs.coll_dom.init()
					})
				})
			},
			//设置子集
			setChildren(pArr, cArr) {
				pArr.forEach(pit => {
					pit.children = [];
					pit.selIndex = null;
					cArr.forEach(cit => {
						if(cit.parentId == pit.id) {
							pit.children.push(cit);
						}
					})
				})
			},
			selectionchange(e) {
				this.selInfo = e;
				this.show = false;
				this.getTestArr();
			},
			// 折叠面板选择后关闭
			itemChange(key, index) {
				this.testArr[key].selIndex = index;
				for(let i = 0; i < this.collapseVal.length; i++) {
					if(this.collapseVal[i] === this.testArr[key].id){
						this.collapseVal.splice(i, 1);
						this.testNumber++;
					}
				}
				console.log("当前数量： ", this.testNumber)
				this.$nextTick(() => {
					this.$refs.coll_dom.init()
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.model-box {
		margin-top: 80rpx;
		.header-box {
			margin: 10rpx 0;
			background-color: #FFF;
			padding: 20rpx;
			line-height: 60rpx;
		}
		.sel-box {
			background-color: #FFF;
			padding: 20rpx;
			.item-box {
				display: inline-block;
				margin: 10rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				border: #19be6b solid 1px;
				color: #19be6b;
			}
			.sel-item-box {
				display: inline-block;
				margin: 10rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				background-color: #19be6b;
				color: #FFF;
			}
		}
	}
</style>
